<template>
  <view class="profile-container">
	  <view class="back" @click="back">返回</view>
    <!-- Navigation Tabs -->
    <view class="nav-tabs">
      <button @click="activeTab = 'articles'" :class="{ active: activeTab === 'articles' }">文章</button>
      <button @click="activeTab = 'resources'" :class="{ active: activeTab === 'resources' }">审核中</button>
    </view>

    <!-- Post List -->
    <view  class="post-list" v-if="items.length && activeTab === 'articles'">
	
		<bokeitem v-for="(item,index) in items" :key="index" :obj="item"></bokeitem>
   <!-- <view v-for="(post, index) in posts" :key="index" class="post-item">
        <image class="post-img" :src="post.image" alt="Post Image" />
        <view class="post-details">
          <h3 class="post-title">{{ post.title }}</h3>
          <p class="post-meta">{{ post.comments }}评论 · {{ post.timeAgo }}</p>
        </view>
      </view> -->
    </view>
	
	
    <!-- Resources Tab Content -->
    <view v-if="activeTab === 'resources'" class="resource-list">
      <auditing v-for="(item,index) in review" :key="index" :obj="item"></auditing>
    </view>
  </view>
</template>

<script>
	import auditing from "@/component/my/auditing.vue"
	import bokeitem from "@/component/untils/boke_item.vue"
	export default {
			name:"mypages",
			components:{
				bokeitem,
				auditing
			},
			props:{
				items:{
					default:()=>[],
					type:Array
				},
				review:{
					default:()=>[],
					type:Array
				}
			},
		  data() {
			return {
			  activeTab: "articles",
			  } // Default active tab
		  },
		  methods:{
			  back(){
				  uni.switchTab({
					url:"/pages/mine/mine"
				  })
			  },
		  }
	};
</script>

<style scoped>
	.back{
		position: relative;
		height: 40px;
	}

.nav-tabs {
  display: flex;
  margin-bottom: 16px;
}

.nav-tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  background-color: #f0f0f0;
  text-align: center;
  cursor: pointer;
}

.nav-tabs button.active {
  background-color: #007BFF;
  color: white;
}
 
.post-list {
  display: flex;
  flex-direction: column;
}

/*.post-item {
  display: flex;
  margin-bottom: 16px;
}

.post-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 16px;
}

.post-details {
  flex: 1;
}

.post-title {
  font-size: 16px;
  font-weight: bold;
}

.post-meta {
  font-size: 14px;
  color: #777;
} */
</style>